<!-- 左侧第一个框 -->
<template>
  <div id="lefttop">
    <dv-border-box-12 style="height: 100%; width: 100%; position: relative">
      <div id="lefttop-box" class="pd10">
        <!-- <div style="height: 10px;"></div> -->
        <span id="span-title">厂-治污设备</span>
        <!-- 左一框上半部分 -->
        <div class="topbox">
          <div id="topchart"></div>
          <div class="toptittle">
            <div class="spana">污水处理厂数量<span class="num">{{ data.list.wsclcCnt || 0 }}个</span></div>
            <div class="spana">水质净化站数量<span class="num">{{ data.list.szjhzCnt || 0}}个</span></div>
          </div>
        </div>
        <!-- 左一框上半部分 -->
        <!-- <el-divider class="split" border-style="dashed" /> -->
        <dv-decoration-2 style="width: 100%; height: 5px; margin-top: -20px" />
        <!-- 左一框下半部分 -->
        <div class="downbox">
          <!-- <div id="downchart"></div> -->
          <LeftTop />
          <div class="toptittle">
            <div class="spanb">雨水泵数量<span class="num">{{ data.list.ysbCnt||0 }}个</span></div>
            <div class="spanb">污水泵数量<span class="num">{{ data.list.wsbCnt||0 }}个</span></div>
            <div class="spanb">排涝泵站数量<span class="num">{{ data.list.plbCnt||0 }}个</span></div>
          </div>
        </div>
      </div>
    </dv-border-box-12>
    <!-- </dv-border-box-11> -->
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, reactive } from "vue";
import { factoryStatistics } from "@/api/home/index"
import LeftTop from '@/components/home_detail/LeftTop.vue'
let data = reactive({
  arr: [],
  list: ""
});
onMounted(() => {
  //厂治污设备请求
  factoryStatistics().then((res) => {
    console.log(res,'res');
    // 把data.data.data的值赋给一个变量
    data.list = res.data;
    // 使用for in循环遍历对象的属性
    for (let key in res.data) {
      if (key == "wsbCnt" || key == 'plbCnt' || key == 'ysbCnt') {
        continue
      }
      // 把属性名和属性值添加到option.series[0].data数组中
      option.series[0].data.push({ name: key, value: res.data[key] });
    }
    // 调用setOption方法更新图表
    mychart.setOption(option);
  })
  let mychart = echarts.init(document.querySelector("#topchart"));
  //==================第一个echarts图======================
  let option = {
    tooltip: {
      trigger: "none",
    },
    title: {
      text: "场站数量",
      left: "31%",
      top: "35%",
      textStyle: {
        //标题内容的样式
        color: "white",
        fontStyle: "normal", //lic主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
        fontWeight: "normal", //可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
        fontFamily: "san-serif", //主题文字字体，默认微软雅黑
        fontSize: 12, //主题文字字体大小，默认为18px
      },
    },
    label: {
      show: true,
      position: "center",
    },
    series: [
      {
        radius: ["40%", "60%"],
        center: ["50%", "40%"],
        type: "pie",
        data: [],
        itemStyle: {
          borderRadius: 4,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false, //指示线
        },
      },
    ],
  };
  mychart.setOption(option);
  //==================第一个echarts图===^^^^^===================
  document.getElementById("topchart").setAttribute("_echarts_instance_", "");
  // document.getElementById("downchart").setAttribute("_echarts_instance_", "");
});
</script>
<style scoped>
#lefttop {
  width: 100%;
  height: 350px;
  /* width: 85%;
  height: 33%; */
  /* background-color: #14181e; */
  box-sizing: border-box;
  border-radius: 6%;
  display: flex;
}

.screen-top-left1 {
  margin: 5px;
  border-radius: 10px;
}

#topchart,
#downchart {
  width: 50%;
  height: 100%;
}

.toptittle {
  width: 50%;
  height: 90%;
}

/* 右边文字样式 */
.spana {
  font-size: 14px;
  margin-top: 30px;
  display: flex;
  color: white;
  justify-content: space-between;
}

.spanb {
  font-size: 14px;
  margin-top: 20px;
  display: flex;
  color: white;
  justify-content: space-between;
}

.num {
  color: aqua;
}

.topbox,
.downbox {
  width: 100%;
  height: 50%;
  display: flex;
  justify-content: space-between;
}

#lefttop-box {
  height: 95%;
  width: 95%;
  background: rgba(4, 14, 17, 0.7);
  border-radius: 2%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>